<template>
  <div class="detail-container">
    <div class="detail-header">
      <div class="left">
        <h3>{{entname}}
        </h3>
         <ul class="info-list">
          <li><span>法人：</span>{{baseInfo.legalPerson || '--'}}</li>
          <li><span>企业类型：</span>{{baseInfo.type || '--'}}</li>
          <li><span>注册时间：</span>{{baseInfo.registerDate | dateFormat}}</li>
          <li><span>登记状态：</span>{{baseInfo.registerStatus || '--'}}</li>
          <li>
            <span>注册资金：</span>
            {{baseInfo.money ? baseInfo.money + baseInfo.moneyCurrency : '--'}}
          </li>
          <li><span>网址：</span>
            <a :href="'http://' + baseInfo.entUrl" target="_blank" v-if="baseInfo.entUrl" class="blue">{{baseInfo.entUrl || '--'}}</a>
            <span v-else>--</span>
            </li>
          <li :title="baseInfo.location"><span>注册地址：</span>{{baseInfo.location || '--'}}</li>
          <!-- <li><span>曾用名：</span>{{baseInfo.nameUsedBefore || '--'}}</li> -->
         <!-- <li class="min"><span>监管状态：</span>{{riskInfo.statusWord}}</li> 
          <li class="min"><span>烽火指数：</span><span class="hot-number">89</span></li> 
          <li><span class="big">最新预警时间：</span>{{riskInfo.predictionDate | dateFormat}}</li>
          <li><span class="big">主要风险类型：</span>{{riskInfo.predictionWord}}</li> -->
        </ul>
        <!-- 下载 -->
        <button class="presentation" @click="reportDownloads" :disabled="isDisable">
          <i class="iconfont icon-xiazai"></i>
          <span>{{downState}}</span>
        </button>
        <div class="right" v-if="riskInfo.prediction">
          <ul class="dialog">
            <!-- 预警中 -->
            <li>
              <i></i>
              <span>监管状态：</span>
              <span class="iregulation">监管中</span>
            </li>
            <li>
              <el-button @click.prevent="openDialog('tosafe')" type="info" class="info">取消监管</el-button>
            </li>
          </ul>
        </div>
      </div>
    </div>
      <jSubNav :items="navItems" class="subnav"></jSubNav>
    <j-dialog :initTitle="dialogTitle" ref="importantDia" class="detail-dialog">
      <h5 v-if="dialogTitle === '设为安全'">请选择安全期限</h5>
      <p v-if="dialogTitle === '设为安全'">
        <input type="radio" name="grade" value='1' v-model="categoryValue" />
        <label>一个月</label>
        <input type="radio" name="grade" value='2' v-model="categoryValue" />
        <label>三个月</label>
        <input type="radio" name="grade" value='3' v-model="categoryValue" />
        <label>六个月</label>
        <input type="radio" name="grade" value='4' v-model="categoryValue" />
        <label>一年</label>
        <input type="radio" name="grade" value='5' v-model="categoryValue" />
        <label>永久安全</label>
      </p>
      <h5>{{dialogSubtitle}}</h5>
      <p v-if="dialogTitle === '重点监控'">
        <input type="radio" name="grade" value='6' v-model="categoryValue" />
        <label>经排查风险较高</label>
        <input type="radio" name="grade" value='7' v-model="categoryValue" />
        <label>近期风险较大</label>
        <input type="radio" name="grade" value='8' v-model="categoryValue" />
        <label>其他</label>
      </p>
      <p v-if="dialogTitle === '设为安全'">
        <input type="radio" name="grade" value='9' v-model="categoryValue" />
        <label>已排查无风险</label>
        <input type="radio" name="grade" value='10' v-model="categoryValue" />
        <label>暂无风险</label>
        <input type="radio" name="grade" value='8' v-model="categoryValue" />
        <label>其他</label>
      </p>
      <p v-if="dialogTitle === '已处理'">
        <input type="radio" name="grade" value='11' v-model="categoryValue" />
        <label>已立案调查</label>
        <input type="radio" name="grade" value='12' v-model="categoryValue" />
        <label>线下已处理</label>
        <input type="radio" name="grade" value='8' v-model="categoryValue" />
        <label>其他</label>
      </p>
      <p v-if="dialogTitle === '取消监管'">
        <input type="radio" name="grade" value='9' v-model="categoryValue" />
        <label>已排查无风险</label>
        <input type="radio" name="grade" value='10' v-model="categoryValue" />
        <label>暂无风险</label>
        <input type="radio" name="grade" value='8' v-model="categoryValue" />
        <label>其他</label>
      </p>
      <textarea name="" id="other_value" cols="30" rows="10" v-if="dialogTextShow"></textarea>
      <!-- TODOS: -->
      <h5 class="operate-man">操作人：
        {{username}}
        </h5>
      <div class="btn">
        <button class="save-btn" @click="dialogEntrue()">确 定</button>
        <button class="cancle-btn" @click="dialogClose()">取 消</button>
      </div>
    </j-dialog>
      <router-view></router-view>
  </div>
</template>
<script>
import { jSubNav, jDialog } from '../../components'
import { entdetail as api, downLoads as dpi } from '../../api'
// import Axios from 'axios'
export default {
  data() {
    return {
      baseUrl: '',
      dialogTitle: '重点监控',
      dialogSubtitle: '请选择操作原因',
      categoryValue: 26,
      dialogTextShow: false,
      entid: 0,
      downState:'企业库详情下载',
      isDisable: false,
      entname: '',
      username: '',
      hrefUrl:'',
      baseInfo: {},
      riskInfo: {
      },
      status: ['一般状态', '重点监控', '设为安全', '已处理', '取消监管'],
      statusCode: 0,
      complianceNum: 12,
      prediction: ['无预警类型', '负面舆情', '特征词命中'],
      tabItems: [],
      navItems: [
        {
          name: '基本信息',
          path: 'baseinfoa',
          exit: true
        },
        {
          name: '无形财产',
          path: 'InProperty',
          exit: true
        },
        {
          name: '经营状况',
          path: 'operationState',
          exit: true
        },
        {
          name: '风险信息',
          path: 'riskInformations',
          exit: true
        },
        {
          name: '企业年报',
          path: 'annualReports',
          exit: true
        },
        {
          name: '企业舆情',
          path: 'publicOpinion',
          exit: true
        }
      ]
    }
  },
  watch: {
    categoryValue(value) {
      this.dialogTextShow = +value === 8
    }
  },
  methods: {
    openDialog(flag) {
      switch (flag) {
        case 'important':
          this.dialogTitle = '重点监控'
          this.statusCode = 1
          break
        case 'safe':
          this.dialogTitle = '设为安全'
          this.statusCode = 2
          break
        case 'shooting':
          this.dialogTitle = '已处理'
          this.statusCode = 3
          break
        case 'tosafe':
          this.dialogTitle = '取消监管'
          this.statusCode = 4
          break
      }
      this.$refs.importantDia.show = true
    },
    setSimple() {
      this.statusCode = 0
      this.dialogEntrue()
    },
    reportDownloads() {
      this.isDisable = true
      let params = {
        entName: this.entname
      }
      this.$msgbox({
        title: '系统提示',
        message: '<span>由于文件过大导致下载时间过长，请耐心等待</span>',
        center: true,
        roundButton: true,
        customClass: 'messageBox',
        type: 'info',
        dangerouslyUseHTMLString: true,
        callback: () => {}
      })
      this.downState = '下载中,请稍后...'
      // console.log(params)
      dpi.getExportDetail(params).then(rtn => {
        // console.log(this.baseUrl + '/entListAndDetail/exportDetail?name=' + rtn.data + '&entName=' + this.entname)
        location.href = this.baseUrl + '/entListAndDetail/exportDetail?name=' + rtn.data + '&entName=' + this.entname + '&flag=1'
        // location.href = this.baseUrl + '/entListAndDetail/exportDetail?name=' + encodeURI(encodeURI(rtn.data)) + '&entName=' + encodeURI(encodeURI(this.entname)) + '&flag=1'
        setTimeout(() => {
          this.isDisable = false
          this.downState = '企业库详情下载'
        }, 500)
      }).catch(err => {
        console.log(err)
        setTimeout(() => {
          this.isDisable = false
          this.downState = '企业风险报告下载'
        }, 1000)
      })
    },
    getEntDetail() {
      let params = {
        entId: 1,
        entName: this.entname
      }
      api.getBusinessInfo(params).then(rtn => {
        if (!rtn.data) return false
        let url = ''
        if (rtn.data.url) {
          url = rtn.data.entUrl.split(' ')[0]
          url = url.split(',')[0]
          url = url.split('，')[0]
          url = url.split('/')[0]
        }
        rtn.data.entUrl = url
        // rtn.data.entUrl = rtn.data.entUrl.split('/')[0].split(',')[0].split(' ')[0]
        this.baseInfo = rtn.data
        // this.hrefUrl = 'http://' + this.baseInfo.entUrl
      }).catch(err => {
        if (err.msg === '无效token') {
          console.log(err)
        }
      })
    },
    showTopo() {
      let data = this.$router.resolve({name:'topo'})
      window.open(data.href, '_blank')
    },
    getrisk() {
      let params = {
        entName: this.entname
      }
      api.getRiskBaseinfo(params).then(rtn => {
        if (!rtn.data) return false
        this.riskInfo = rtn.data
        this.entid = rtn.data.id
        this.riskInfo.statusWord = this.status[this.riskInfo.status]
      })
    },
    dialogEntrue() {
      let params = {
        id: this.entid,
        status: this.statusCode
      }
      let _this = this
      api.setCompanyStatus(params).then(rtn => {
        setTimeout(function() {
          // _this.getrisk()
          _this.getEntDetail()
          this.$refs.importantDia.show = false
        }, 1000)
      })
    },
    dialogClose() {
      this.$refs.importantDia.show = false
    }
  },
  mounted() {
    this.entid = this.$route.query.entid || 0
    this.entname = this.$route.query.entname || ''
    // this.getrisk()
    this.getEntDetail()
    // document.querySelector('.nav-item').click()
    /** 恢复页面置顶**/
    document.body.scrollTop = 0
    document.documentElement.scrollTop = 0
    this.baseUrl = window.api_host
  },
  components: {
    jSubNav,
    jDialog
  }
}
</script>
<style lang="scss" scoped>
.detail-header {
  height: 255px;
  display: flex;
  margin-top: 28px;
  margin-bottom: 20px;
  background: #fff;
}
.blue {
  color: #0f93fe;
}
.left {
  height: 100%;
  // flex-grow: 61.49;
  padding: 0 30px;
  // max-width: 860px;
  position: relative;
  flex: 1;  
  .presentation {
    background-color: #3f8efa;
    color: white;
    border-radius: 5px;
    position: absolute;
    left: 30px;
    cursor: pointer;
    font-size: 14px;
    padding: 10px 25px;
    font-weight: normal;
    span {
      margin-left: 5px;
    }
    &:hover {
      /*opacity: 0.9;*/
    }
  }
  h3 {
    font-size: 16px;
    height: 70px;
    font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: center;
    background: -webkit-linear-gradient(#fff, #fff, #f0fbff); /* Safari 5.1 - 6.0 */
    background: -o-linear-gradient(#fff, #fff, #f0fbff); /* Opera 11.1 - 12.0 */
    background: -moz-linear-gradient(#fff, #fff, #f0fbff); /* Firefox 3.6 - 15 */
    background: linear-gradient(#fff, #fff, #f0fbff); /* 标准的语法 */
    span {
      color: #ff8a0d;
      background: #ffe6cc;
      padding: 0 10px;
      position: relative;
      display: inline-block;
      font-size: 12px;
      margin-left: 18px;
      height: 20px;
      line-height: 20px;
      &::after {
        content: '';
        position: absolute;
        border: 10px solid transparent;
        border-left-color: #ffe6cc;
        top: 0;
        right: -20px;
      }
    }
  }
  .info-list {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    li {
      width: 450px;
      height: 34px;
      font-size: 14px;
      line-height: 34px;
      overflow: hidden;
      text-overflow:ellipsis;
      white-space: nowrap;
      span {
        display: inline-block;
        width: 85px;
        color: #a6a6a6;
        &.big {
          width: 115px;
        }
        &.hot-number {
          font-size: 22px;
          color: #ffb65e;
        }
      }
      &.min {
        min-width: 300px;
      }
    }
  }
  .detail-btn-group {
    display: flex;
    justify-content: flex-end;
    button {
      padding: 10px 25px;
      font-weight: normal;
    }
  }
}
.right {
  position: absolute;
  height: 255px;
  right: 21px;
  top: 0;
  .info {
    background: #f0fbff;
    border: #0f93fe 1px solid;
    color: #0f93fe;
  }
  .dialog {
    padding: 120px 0;
    li {
      float: left;
      height: 26px;
      line-height: 26px;
      text-align: center;
      margin: 10px;
      padding: 10px;
      position: relative;
      i {
        width: 40px;
        height: 40px;
        position: absolute;
        left: 40px;
        top: 0;
        background-image: url("../../assets/images/house.png");
      }
      span {
        position: relative;
        &.iregulation {
          font-size: 26px;
        }
      }
    }
  }
}
.subnav {
  margin-top: 20px;
}
.detail-dialog {
  width: 545px;
  h5 {
    line-height: 46px;
    font-weight: bold;
    &.operate-man {
      margin: 10px 0 20px;
    }
  }
  textarea {
    height: 60px;
    width: 435px;
    margin: 20px 0 0 40px;
  }
  p {
    input {
      margin-left: 20px;
    }
  }
  .btn {
    text-align: center;
    margin-bottom: 20px;
    button:nth-child(2) {
      margin-left: 20px;
    }
  }
}
</style>



// WEBPACK FOOTER //
// src/view/clib/detail-index.vue